<template>
    <div>
        <list-top></list-top>
        <div class="storeContent">
            <div class="head">
                <div class="headInner">
                    <img src="./images/bak01m.png" alt="" class="logo">
                    <div class="storeMsg">
                        <h1>桂林医药股份有限公司</h1>
                        <div>
                            <span class="b-place">地点：桂林</span>
                            <el-rate v-model="value5" disabled>
                            </el-rate>
                        </div>
                    </div>
                    <div class="ewm">
                        <img src="./images/bak02m.png" alt="">
                        <span>手机下单更便捷</span>
                    </div>
                </div>
            </div>
            <div class="storeNav">
                <div class="headTitle">
                    <span>首页</span>
                    <span class="active">所有商品</span>
                    <span>公司档案</span>
                    <span>联系客服</span>
                    <span>收藏店铺</span>
                </div>
            </div>
            <div class="storeAllProductMain">
                <div class="keyword-nav">
                    <div class="groups">
                        <div class="group categoryGroup">
                            <div class="s-head">分类</div>
                            <div class="s-body clear" :class="{autoHeight:categoryAutoHeight == true}">
                                <div class="inner">
                                    <a href="javascript:void(0);" v-for="(ocategory,index) in 40" :key="index">西药</a>
                                </div>
                            </div>
                            <div class="s-foot">
                                <button @click="categoryAutoHeight = categoryAutoHeight ? false : true">更多<i class="iconfont icon-jiantou"></i></button>
                            </div>
                        </div>
                        <div class="group reagentGroup">
                            <div class="s-head">药剂类型</div>
                            <div class="s-body clear" :class="{autoHeight:reagentAutoHeight == true}">
                                <div class="inner">
                                    <a href="javascript:void(0);" v-for="(oreagent,index) in 40" :key="index">类型</a>
                                </div>
                            </div>
                            <div class="s-foot">
                                <button @click="reagentAutoHeight = reagentAutoHeight ? false : true">更多<i class="iconfont icon-jiantou"></i></button>
                            </div>
                        </div>
                        <div class="group priceGroup">
                            <div class="s-head">价格</div>
                            <div class="s-body clear">
                                <a href="javascript:void(0);" v-for="(oprice,index) in priceList" :key="index">{{oprice.name}}</a>
                            </div>
                        </div>
                    </div>
                </div>
                   <div class="searchProductListBox clear">
                    <div class="productMainOperation">
                        <a href="javascript:void(0);" class="active a-sales">销量<i class="iconfont icon-xiangxiajiantoucuxiao"></i></a>
                        <a href="javascript:void(0);" class="a-price active">
                                        价格
                                        <i class="iconfont icon-ue703triangleup"></i>
                                        <i class="iconfont icon-ue704triangledown"></i>
                                    </a>
                        <a href="javascript:void(0);" class="a-time active">
                                        上架时间
                                        <i class="iconfont icon-ue703triangleup"></i>
                                        <i class="iconfont icon-ue704triangledown"></i>
                            </a>
                    </div>
                    <div class="w-line">
                        <div class="floater" style="width:100px;"></div>
                    </div>
                    <div class="searchProductList clear">
                        <div class="productPublicStyle-a" v-for="(oproduct,index) in 15" :key="index">
                            <router-link to="/"><img src="../images/bak09.jpg" alt=""></router-link>
                            <div class="productDetail">
                                <div class="p-name" title="白云山小菜胡感冒药哈小菜胡感冒药哈白云山小菜胡感冒药哈小菜胡感冒药哈">
                                    <router-link to="/">白云山小菜胡感冒药哈小菜胡感冒药哈白云山小菜胡感冒药哈小菜胡感冒药哈</router-link>
                                </div>
                                <div class="p-category">中成药</div>
                                <div class="p-price">¥268.00</div>
                                <div class="p-producer">桂林医药集团有限公司</div>
                                <el-rate v-model="value10" disabled>
                                </el-rate>
                            </div>
                            <router-link to="/" class="p-service"><i class="iconfont icon-kefu"></i><span>客服</span></router-link>
                        </div>
                    </div>
                    <div class="pageBotom">
                        <div class="pageBotomRight">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    import listTop from "./public/listTop";
    export default {
        components: {
            listTop,
        },
        data() {
            return {
                value5: 3,
                value10:5,
                categoryAutoHeight: false,
                reagentAutoHeight: false,
                priceList: [ //价格
                    {
                        name: "0-99",
                    },
                    {
                        name: "100-199",
                    },
                    {
                        name: "200-399",
                    },
                    {
                        name: "400-699",
                    },
                    {
                        name: "700以上",
                    }
                ],
            }
        },
        methods: {
        },
    }
</script>

<style lang="less">
    @import "./css/mallStore.less";
</style>
